<template>
  <div>
    <div class="search">
      <Row>
        <Col>
          <Card>
            <Row>
              <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
                <Form-item label="典型设计类型" prop="">
                  <Select v-model="searchForm.typical_classification_id" clearable filterable style="width:360px">
                    <Option v-for="(item,index) in typicalClassList" :value="item.id" :key="index">
                      {{ item.classification_name }} 
                    </Option>
                  </Select>
                </Form-item>
                <Form-item style="margin-left:-60px;" class="br">
                  <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                  <Button @click="handleReset">重置</Button>
                </Form-item>
              </Form>
            </Row>
            <Row>
              <Alert show-icon>
                已选择 <span class="select-count">{{selectCount}}</span> 项
                <a class="select-clear" @click="clearSelectAll">清空</a>
              </Alert>
            </Row>
            <Row>
              <Table
                border
                :loading="loading"
                :columns="columns"
                :data="data"
                sortable="custom"
                @on-selection-change="showSelect"
                ref="table">
              </Table>
            </Row>
            <Row type="flex" justify="end" class="page">
              <Page
                :current="searchForm.pageNumber"
                :total="total"
                :page-size="searchForm.pageSize"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50]"
                size="small"
                show-total
                show-elevator
                show-sizer
              ></Page>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
    <viewTypical :typical-design="typicalDesign" :typical-material="typicalMaterial" 
      :type="showType" v-model="viewVisiable" />
    <editTypical :typical-design="typicalDesign" :typical-material="typicalMaterial" 
      :type="showType" v-model="editVisiable" />
  </div>
</template>
<script>
import util from '@/libs/util';
import moment from 'moment';
import viewTypical from './view';
import editTypical from './edit';
import { getTypicalClassification, getTypicalDesign, getTypicalMaterials } from '@/api/typical';
export default {
  name: 'typical-manager',
  components: {
    viewTypical,
    editTypical
  },
  data() {
    return {
      loading: false,
      searchForm: {
        typical_classification_id: '',
        pageNumber: 1,
        pageSize: 10
      },
      typicalClassList: [],
      data: [],
      total: 0,
      selectCount: 0,
      exportData: [],
      selectList: [],
      viewVisiable: false,
      editVisiable: false,
      typicalDesign: {},
      typicalMaterial: [],
      showType: '1',
      columns: [
        {
          type: "selection",
          width: 50,
          align: "center",
        },
        {
          type: "index",
          width: 50,
          align: "center",
        },
        {
          title: '设计序号',
          key: 'serial_number',
          width: 80,
          align: "center",
        },
        {
          title: '杆型',
          key: 'pole_type',
          align: "center",
          width: 120
        },
        {
          title: '名称',
          key: 'typical_name',
          align: "center",
          width: 200
        },
        {
          title: '适用电杆',
          key: 'pole_highly',
          width: 260
        },
        {
          title: '适用范围',
          key: 'apply_scope',
          width: 280
        },
        {
          title: '添加时间',
          key: 'add_time',
          align: "center",
          width: 100,
          render: (h, params) => {
            let re = moment(params.row.add_time).format('YYYY-MM-DD');
            return h("div", re);
          }
        },
        {
          title: '添加人',
          key: 'real_name',
          align: "center",
          width: 100
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.view(params.row)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.row)
                  }
                }
              }, '编辑'),
            ]);
          }
        }
      ],

    }
  },

  methods: {
    getTypicalClass() {
      getTypicalClassification().then(res => {
        if (res.code === 0) {
          this.typicalClassList = res.data;
        }
      })
    },
    getTypicalDesignList() {
      this.loading = true;
      getTypicalDesign(this.searchForm).then(res => {
        if (res.code === 0) {
          this.data = res.data.raws;
          this.total = res.data.count;
        }
        this.loading = false;
      })
    },
    init() {
      this.getTypicalClass();
      this.getTypicalDesignList();
    },
    handleSearch() {
      if (this.searchForm.typical_classification_id) {
        this.getTypicalDesignList();
      } else {
        this.$Message.info('请选择典型设计类型');
        return;
      }
    },
    handleReset() {
      this.searchForm.typical_classification_id = '';
      this.getTypicalDesignList();
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    showSelect(e) {
      this.exportData = e;
      this.selectList = e;
      this.selectCount = e.length;
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getTypicalDesignList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getTypicalDesignList();
    },
    view(v) {
      this.typicalDesign = v;
      const typical_design_id = v.id;
      getTypicalMaterials({typical_design_id}).then(res => {
        if (res.code === 0) {
          this.typicalMaterial = res.data.raws;
        }
      });
      this.viewVisiable = true;
    },
    edit(v) {
      const hasPermission = util.oneOf('edit', this.$route.meta.permTypes);
      if (!hasPermission) {
        this.$Message.error('抱歉，您没有操作权限！');
        return;
      };
      this.typicalDesign = v;
      const typical_design_id = v.id;
      getTypicalMaterials({typical_design_id}).then(res => {
        if (res.code === 0) {
          this.typicalMaterial = res.data.raws;
        }
      });
      this.editVisiable = true;
    },
    refresh() {
    },
  },
  mounted() {
    this.init();
  }
}
</script>
<style lang="less">
  @import "./typicalManager.less";
</style>